<template>
  <div>
    <a-pagination v-model:current="current1" v-model:pageSize="pageSize" :page-size-options="pageSizeOptions"  :hideOnSinglePage="true"
      show-quick-jumper show-less-items :total="total" show-size-changer @showSizeChange="onShowSizeChange"
      @change="onChange">
      <template #buildOptionText="props">
        <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
        <span v-else>全部</span>
      </template>
    </a-pagination>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, watchEffect } from 'vue';
export default defineComponent({
  props: (['total', 'page', 'pagesize']),
  setup(props, ctx) {
    const pageSizeOptions = ref<string[]>(['10', '20', '30', '40', '50']);  //页数显示多少条
    const current1 = ref(1); //当前条数
    const pageSize = ref(20);  //一页展示多少条
    const pageSizeRef = ref(10);//默认一页显示10条
    const totalRef = ref(50); //总条数
    const onChange = (pageNumber: number) => {
      console.log('Page: ', pageNumber);  //pageNumber表示了当前是多少页
      if(pageNumber == props.page){
        return 
      }
      ctx.emit('onChange', pageNumber)
    };
    const onShowSizeChange = (current: number, pageSize: number) => {
      console.log(current, pageSize);  //pageSize表示当前页数有多少条
      ctx.emit('onShowSizeChange', pageSize)
    };
    watchEffect(() => {
       current1.value = props.page
       pageSize.value = props.pagesize
       totalRef.value = props.total 
    })
    return {
      current1,
      pageSizeOptions,
      pageSizeRef,
      onChange,
      totalRef,
      pageSize,
      onShowSizeChange,
    };
  },
});
</script>
<style scoped lang="less">
 .ant-pagination{
  width: 500px;
  background-color: #fff;
  margin-top: 40px;
  margin-left: 60%;
}
.ant-pagination-item-active{
  font-weight: 500;
  background: rgb(255, 0, 0);
  border-color: #000000;
}
.ant-pagination-item{
  border-radius: 15px;
  border: 2px solid #000;
}


</style>
  
  